<template>
    <div class="leftside-content flex-column">
        <ul class="leftside-list flex-row">
            <li class="item flex-item">
                <Dropdown trigger="click"  @on-click="selectChange">
                    <router-link :to="{path: 'phrase'}">
                        <Icon type="arrow-down-b"></Icon>常用语
                    </router-link>
                    <DropdownMenu slot="list">
                        <DropdownItem v-for="item in filelist" :key="item.value" :name=item.key >{{item.value}}</DropdownItem>
                    </DropdownMenu>
                </Dropdown>
            </li>
            <li class="item flex-item">
                <router-link :to="{path: 'trajectory'}">轨迹</router-link>
            </li>
            <li class="item flex-item">
                <router-link :to="{path: 'chathistory'}">历史对话</router-link>
            </li>
            <li class="item flex-item">
                <router-link :to="{path: 'customerinfo'}">客户信息</router-link>
            </li>
        </ul>
        <router-view class="flex-item"></router-view>
    </div>
</template>
<script>
import eventBus from '@/pages/index/utils/eventBus'

export default {
    data () {
        return {
            formItem:{
                model2: ''
            },
            filelist:[
                {key: "words",value: "常用语"},
                {key: "urls",value: "常用链接"},
                {key: "files",value: "常用文件"},
                {key: "materials",value: "常用素材"},
            ]
        }
    },
    methods: {
        selectChange (type) {
            eventBus.$emit('fileChange',type);
        }
    }
}
</script>
<style lang="scss" scoped>
.leftside-content {
    height: 100%;
    .leftside-list {
        height: 28px;
        background-color: $c_14;
        .item {
            line-height: 28px;
            text-align: center;
            > a {
                color: $c_3;
                display: block;
                width: 100%;
                height: 100%;
                &.router-link-active {
                    background-color: $c_27;
                }
            }
            &:hover {
                background-color: $c_27;
            }
            
        }
    }
}
</style>

